{% if reviews %}
{% for review in reviews %}
  <table class="table table-striped table-bordered">
    <tr>
      <td rowspan="6" class="col-sm-3">
        <img src="{{ review.avatar }}" class="img-responsive" style="display: inline-block;">
        <span>{{ review.customer_name }}</span>
      </td>
    </tr>
    <tr>
      <td>
        {% if review.rating %}
          {% for i in 0..review.rating %}
            <i class="fa fa-star"></i>
          {% endfor %}
        {% endif %}
      </td>
    </tr>
    <tr>
      <td>
        {{ review.comments }}
      </td>
    </tr>
    <tr class="review-img-list">
      <td>
        {% if review.images %}
          {% for image in review.images %}
            <div class="col-sm-2">
              <div class="review-img-list-content">
                <img src="{{ image.small }}" class="img-responsive" big-src="{{ image.big }}">
              </div>
            </div>
          {% endfor %}
        {% endif %}
      </td>
    </tr>
    <tr class="review-img-single">
      <td></td>
    </tr>
    <tr>
      <td>
        {{ review.product_model }} {{ review.product_name }} {{ review.date_created }}
      </td>
    </tr>
  </table>
{% endfor %}
<div class="text-right">{{ pagination }}</div>
{% else %}
  <img src="{{ empty_image }}" style="width: 100px;display: inline-block;" class="img-responsive">
<span>{{ text_no_reviews }}</span>
{% endif %}
<script type="text/javascript">
  $(document).on('click', '.review-img-list-content img', function (){
    var $this = $(this);
    var image = $this.attr('big-src');
    var html = '<img src="' + image + '" class="img-responsive review-img-big">';
    $this.parent('div').parent('div').parent('td').parent('tr').next('.review-img-single').find('td').html(html)
  });
  $(document).on('click', '.review-img-big', function () {
    $(this).remove();
  });
</script>